<template>
    <div class="index-lists">
        <el-card class="!border-none" shadow="never">
            <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
                <el-form-item label="客户名称" prop="clientName">
                    <el-input class="w-[280px]" v-model="queryParams.clientName" />
                </el-form-item>
                <el-form-item label="分配状态" prop="state">
                  <el-select
                      v-model="queryParams.state"
                      placeholder="请选择分配状态"
                      size="large"
                      class="w-[280px]"
                  >
                    <el-option
                        v-for="item in StartList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="客户来源" prop="clientSource">
                    <el-input class="w-[280px]" v-model="queryParams.clientSource" />
                </el-form-item>
                <el-form-item label="咨询业务" prop="advisoryService">
                    <el-input class="w-[280px]" v-model="queryParams.advisoryService" />
                </el-form-item>
                <el-form-item label="联系人" prop="contacts">
                    <el-input class="w-[280px]" v-model="queryParams.contacts" />
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input class="w-[280px]" v-model="queryParams.phone" />
                </el-form-item>
                <el-form-item label="业务人员" prop="salesman">
                    <el-input class="w-[280px]" v-model="queryParams.salesman" />
                </el-form-item>
                <el-form-item label="操作时间" prop="operateTime">
                    <daterange-picker
                        v-model:startTime="queryParams.createTimeStart"
                        v-model:endTime="queryParams.createTimeEnd"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="!border-none mt-4" shadow="never">
            <div>
                <el-button v-perms="['volume:add']" type="primary" @click="handleAdd()">
                    <template #icon>
                        <icon name="el-icon-Plus" />
                    </template>
                    新增
                </el-button>
              <el-button v-perms="['volume:add']" type="primary" @click="dialogVisible=true">
                <template #icon>
                  <icon name="el-icon-upload" />
                </template>
                导入
              </el-button>
              <el-button v-perms="['volume:add']" type="primary" @click="handleExportExcel">
              <template #icon>
                <icon name="el-icon-download" />
              </template>
              导出
            </el-button>
              <el-button v-perms="['volume:add']" type="primary" >
                <template #icon>
                  <icon name="el-icon-folder" />
                </template>
                批量分配
              </el-button>
              <el-button v-perms="['volume:add']" type="primary" >
                <template #icon>
                  <icon name="el-icon-user" />
                </template>
                转为客户
              </el-button>
            </div>
            <el-table
                class="mt-4"
                size="large"
                v-loading="pager.loading"
                :data="pager.lists" stripe
            >
                <el-table-column label="客户名称" prop="clientName" min-width="140" />
                <el-table-column label="分配状态" prop="state" min-width="140" >
                  <template #default="{ row }">
                   <span v-if="row.state===0">未分配</span>
                    <span v-if="row.state===1">已分配</span>
                    <span v-if="row.state===2">已编辑</span>
                  </template>
                </el-table-column>
                <el-table-column label="客户来源" prop="clientSource" min-width="140" />
                <el-table-column label="所属行业" prop="belongIndustry" min-width="140" />
                <el-table-column label="咨询业务" prop="advisoryService" min-width="140" />
                <el-table-column label="业务报价" prop="businessPrice" min-width="140" />
                <el-table-column label="联系人" prop="contacts" min-width="140" />
                <el-table-column label="职务" prop="post" min-width="140" />
                <el-table-column label="电话" prop="phone" min-width="140" />
                <el-table-column label="省" prop="province" min-width="140" />
                <el-table-column label="市" prop="city" min-width="140" />
                <el-table-column label="区" prop="district" min-width="140" />
                <el-table-column label="业务人员" prop="salesman" min-width="140" />
                <el-table-column label="操作时间" prop="operateTime" min-width="140" >
                  <template #default="{ row }">
                    <span >{{ row.operateTime.substring(0,10) }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="120" fixed="right">
                    <template #default="{ row }">
                        <el-button
                            v-perms="['volume:edit']"
                            type="primary"
                            link
                            @click="handleEdit(row)"
                        >
                            编辑
                        </el-button>
                        <el-button
                            v-perms="['volume:del']"
                            type="danger"
                            link
                            @click="handleDelete(row.id)"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
      <el-dialog
          v-model="dialogVisible"
          title="导入"
          width="80%"
      >
        <el-upload
            class="upload-demo"
            drag
            :action="action"
            multiple
            :headers="header"
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">
            拖拽上传 或 <em>点击上传</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              jpg/png files with a size less than 500kb
            </div>
          </template>
        </el-upload>
        <span >点击下载<em style="color: blue" @click="handleDownLoadExcel">模板</em></span>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="closeType()">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>
        <edit-popup
            v-if="showEdit"
            ref="editRef"
            @success="getLists"
            @close="showEdit = false"
        />
    </div>
</template>
<script lang="ts" setup name="volume">
import { volumeDelete, volumeLists } from '@/api/volume'
import { usePaging } from '@/hooks/usePaging'
import feedback from '@/utils/feedback'
import EditPopup from './edit.vue'
import {getToken} from "@/utils/auth";
import axios from "axios";
import configs from "@/config";
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
const showEdit = ref(false)
const queryParams = reactive({
    clientName: '',
    state: '',
    clientSource: '',
    belongIndustry: '',
    advisoryService: '',
    businessPrice: '',
    contacts: '',
    post: '',
    phone: '',
    province: '',
    city: '',
    district: '',
    salesman: '',
    operateTimeStart: '',
    operateTimeEnd: '',
})
const dialogVisible = ref(false)
const action = ref(`${configs.baseUrl}/api/volume/importExcel`)
const header = reactive({
  'like-admin': `Bearer ${getToken()}`,  // 设置 token 在请求头中
})
const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: volumeLists,
    params: queryParams
})
const StartList = ref([{label:"未分配",value:0},{label:"已分配",value:1},{label:"已编辑",value:"2"}])


const handleAdd = async () => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open('add')
}

const closeType = () => {
  dialogVisible.value=false
    getLists()
}

const handleEdit = async (data: any) => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open('edit')
    editRef.value?.getDetail(data)
}

const handleDelete = async (id: number) => {
    await feedback.confirm('确定要删除？')
    await volumeDelete({ id })
    feedback.msgSuccess('删除成功')
    getLists()
}

getLists()
</script>
